<template>
<view class="TUI-Create-conversation-container">
	
  <view class="tui-navigatorbar">
    <image class="tui-navigatorbar-back" @tap="goBack" src="/static/static/assets/ic_back_white.svg"></image>
    <view class="conversation-title">发起会话</view>
  </view>
  <view class="tui-search-area">
    <view class="tui-search-bar">
      <image class="tui-searchcion" src="/static/static/assets/serach-icon.svg"></image>
      <input class="tui-search-bar-input" :value="userID" placeholder="请输入用户ID" @input="userIDInput" @confirm="getuserProfile" @blur="getuserProfile">

    </view>
    <view class="tui-showID">您的用户ID  {{userInfo.userID}}</view>
  </view>
  <view class="tui-person-to-invite" v-if="searchUser.userID">
    <image @click="handleChoose" class="tui-normal-choose" :src="isChoose ? '/static/static/assets/single-choice-hover.svg' : '/static/static/assets/single-choice-normal.svg'"></image>
    <view class="tui-person-profile">
      <image class="tui-person-profile-avatar" :src="searchUser.avatar || 'https://sdk-web-1252463788.cos.ap-hongkong.myqcloud.com/component/TUIKit/assets/avatar_21.png'"></image>
      <view>
        <view class="tui-person-profile-nick">{{searchUser.nick}}</view>
        <view class="tui-person-profile-userID">用户ID：{{searchUser.userID}}</view>
      </view>
    </view>
  </view>
  <view class="tui-confirm-btn" @tap="bindConfirmInvite">确认邀请</view>
</view>
</template>

<script>
const app = getApp();

export default {
  data() {
    return {
      userID: '',
      searchUser: {},
      isChoose: false,
      userInfo: {}
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad() {
    this.setData({
      userInfo: app.globalData.userInfo
    });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {},

  methods: {
    goBack() {
      uni.navigateBack({
        delta: 1
      });
    },

    userIDInput(e) {
      this.setData({
        userID: e.detail.value,
        searchUser: {}
      });
    },

    getuserProfile() {
      uni.$TUIKit.getUserProfile({
        userIDList: [this.userID]
      }).then(imRes => {
        if (imRes.data.length > 0) {
          this.setData({
            searchUser: imRes.data[0]
          });
        } else {
          uni.showToast({
            title: '用户不存在',
            icon: 'error'
          });
          this.setData({
            userID: ''
          });
        }
      });
    },

    handleChoose() {
      this.isChoose = !this.isChoose;
      this.setData({
        searchUser: this.searchUser
      });
    },

    bindConfirmInvite() {
      if (this.isChoose) {
        uni.navigateTo({
          url: `../../TUI-Chat/chat?conversationID=C2C${this.searchUser.userID}`
        });
      } else {
        uni.showToast({
          title: '请选择相关用户',
          icon: 'none'
        });
      }
    }

  }
};
</script>
<style>
@import "./create.css";
</style>
